<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item title="价格" @change="changePrice" v-model="priceVal" :options="priceArr" />
      <van-dropdown-item
        title="分类"
        @change="categoryChange"
        v-model="cateGoryVal"
        :options="filterCategory"
      />
    </van-dropdown-menu>
    <!-- 空状态 -->
    <van-empty v-if="goodsList.length===0" image="search" description="您搜索的商品不存在" />
    <!-- 产品组件 -->
    <Product :goodsList="goodsList" v-else></Product>
  </div>
</template>

<script>
import Product from '../components/Product'
export default {
  props: ['goodsList', 'filterCategory'],
  components: {
    Product
  },
  data () {
    return {
      // 分类下拉菜单当前项
      cateGoryVal: '',
      // 当前加个数据选项
      priceVal: '',
      // 价格数据
      priceArr: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
      ]
    }
  },
  methods: {
    // 改变分类数据
    categoryChange (value) {
      this.$emit('changeCategoryVal', value)
    },
    // 改变价格数据
    changePrice (value) {
      this.$emit('changePriceVal', value)
    }
  },
  created () {
    // 遍历当前分类菜单项
    this.filterCategory.map(item => {
      if (item.checked === true) {
        this.cateGoryVal = item.value
      }
    })
  }
}
</script>

<style>
</style>
